<template>
	<view class="login-bg pad-left-right-96 columnY" :style="{'background-image': 'url('+login_bg+')'}">
		<view class="login-content">
			<up-navbar bgColor="transparent" :titleStyle="{color:'#333'}" leftIcon="" title="借款审批系统"
				:autoBack="true"></up-navbar>
			<view class="user-info columnY centerXY">
				<!-- <up-avatar size="100"></up-avatar> -->
				<view class="color-text mar-top-30 font-48">借款审批</view>
			</view>
			<button v-if="!checkbox" @click="hanldeisCheckbox" class="login-button">微信授权手机号登录</button>
			<button v-else class="login-button" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">微信授权手机号登录</button>
			<AuthDialog ref="AuthDialog" :phpneData="phpneData" @accept="accept"></AuthDialog>
		</view>
		<agreement class="mar-top-bottom-30" @hanldeCheckbox="hanldeCheckbox" :checkbox="checkbox"></agreement>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/index.js'
	import {
		login_bg
	} from '../../common/config.js'
	export default {
		data() {
			return {
				// 切换协议选择
				checkbox: false,
				login_bg: login_bg,
				phpneData: {

				}
			}
		},
		methods: {
			// 点击未选中的
			hanldeisCheckbox() {
				if (!this.checkbox) {
					uni.showToast({
						title: '先勾选协议',
						icon: 'none'
					})
					return
				}
			},
			// 获取手机号
			getPhoneNumber(e) {
				let {
					encryptedData,
					iv,
					code,
					errMsg
				} = e.detail;
				this.phpneData.iv = iv;
				this.phpneData.encryptedData = encryptedData;
				this.phpneData.code = code;

				if (errMsg == 'getPhoneNumber:ok') {
					this.$refs.AuthDialog.show()
				}
			},
			// 同意授权
			hanldeCheckbox() {
				this.checkbox = !this.checkbox;
			},
			accept(data) {
				uni.navigateTo({
					url: '/pages/index/index'
				})
				uni.setStorageSync('token', data.token);
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-bg {
		background-size: 100% 100%;
		height: 100vh;
	}

	.user-info {
		height: 800rpx;
		justify-content: center;
	}

	.login-content {
		flex-grow: 1;
	}

	.login-button {
		background: $color-theme;
		box-shadow: 0rpx 18rpx 18rpx 0rpx rgba(60, 131, 255, 0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		color: #FFFFFF;
	}
</style>